<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学院管理 - 实验室辅助管理系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/fontawesome-local.css}">
</head>
<body>
    <div class="management-container">
        <!-- 侧边栏 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <h2><i class="fas fa-flask"></i> 学院管理</h2>
            </div>
            <ul class="nav-menu">
                <li><a th:href="@{/dashboard}"><i class="fas fa-tachometer-alt"></i> 系统仪表盘</a></li>
                <li class="active"><a th:href="@{/college-management}"><i class="fas fa-university"></i> 学院管理</a></li>
                <li><a th:href="@{/term-management}"><i class="fas fa-calendar-alt"></i> 学期管理</a></li>
                <li><a th:href="@{/laboratory-management}"><i class="fas fa-microscope"></i> 实验室管理</a></li>
                <li><a th:href="@{/user-management}"><i class="fas fa-users"></i> 用户管理</a></li>
                <li><a th:href="@{/assignment-management}"><i class="fas fa-user-cog"></i> 管理员分配</a></li>
            </ul>
        </nav>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部栏 -->
            <header class="top-bar">
                <div class="top-bar-left">
                    <h1>学院管理</h1>
                </div>
                <div class="top-bar-right">
                    <div class="user-info">
                        <span th:text="${currentUser.name}">管理员</span>
                        <a th:href="@{/logout}" class="logout-btn">退出</a>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content">
                <!-- 操作栏 -->
                <div class="action-bar">
                    <button class="btn btn-primary" onclick="showAddCollegeModal()">
                        <i class="fas fa-plus"></i> 添加学院
                    </button>
                    <div class="search-box">
                        <input type="text" id="searchInput" placeholder="搜索学院名称..." onkeyup="filterColleges()">
                        <i class="fas fa-search"></i>
                    </div>
                </div>

                <!-- 学院列表 -->
                <div class="card">
                    <div class="card-header">
                        <h3>学院列表</h3>
                        <span class="badge" th:text="${colleges.size()} + ' 个学院'">0 个学院</span>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table" id="collegeTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>学院名称</th>
                                        <th>实验室数量</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="college : ${colleges}">
                                        <td th:text="${college.id}">1</td>
                                        <td th:text="${college.name}">计算机学院</td>
                                        <td th:text="${college.laboratories.size()}">5</td>
                                        <td>待更新</td>
                                        <td>
                                            <button class="btn btn-sm btn-info" th:data-id="${college.id}" th:data-name="${college.name}" onclick="editCollegeFromButton(this)">
                                                <i class="fas fa-edit"></i> 编辑
                                            </button>
                                            <button class="btn btn-sm btn-danger" th:data-id="${college.id}" onclick="deleteCollegeFromButton(this)">
                                                <i class="fas fa-trash"></i> 删除
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 添加学院模态框 -->
    <div id="addCollegeModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加学院</h3>
                <span class="close" onclick="closeModal('addCollegeModal')">&times;</span>
            </div>
            <div class="modal-body">
                <form id="addCollegeForm">
                    <div class="form-group">
                        <label for="collegeName">学院名称</label>
                        <input type="text" id="collegeName" name="name" class="form-control" placeholder="请输入学院名称" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('addCollegeModal')">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveCollege()">保存</button>
            </div>
        </div>
    </div>

    <!-- 编辑学院模态框 -->
    <div id="editCollegeModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑学院</h3>
                <span class="close" onclick="closeModal('editCollegeModal')">&times;</span>
            </div>
            <div class="modal-body">
                <form id="editCollegeForm">
                    <input type="hidden" id="editCollegeId" name="id">
                    <div class="form-group">
                        <label for="editCollegeName">学院名称</label>
                        <input type="text" id="editCollegeName" name="name" class="form-control" placeholder="请输入学院名称" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('editCollegeModal')">取消</button>
                <button type="button" class="btn btn-primary" onclick="updateCollege()">保存</button>
            </div>
        </div>
    </div>

    <script th:src="@{/js/app.js}"></script>
    <script>
        // 显示添加学院模态框
        function showAddCollegeModal() {
            document.getElementById('addCollegeModal').style.display = 'block';
            document.getElementById('collegeName').value = '';
        }

        // 编辑学院
        function editCollege(id, name) {
            document.getElementById('editCollegeId').value = id;
            document.getElementById('editCollegeName').value = name;
            document.getElementById('editCollegeModal').style.display = 'block';
        }

        // 从按钮编辑学院
        function editCollegeFromButton(button) {
            const id = button.getAttribute('data-id');
            const name = button.getAttribute('data-name');
            editCollege(id, name);
        }

        // 保存学院
        function saveCollege() {
            const form = document.getElementById('addCollegeForm');
            const formData = new FormData(form);
            
            fetch('/api/colleges', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    closeModal('addCollegeModal');
                    location.reload();
                } else {
                    alert('添加失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('添加失败');
            });
        }

        // 更新学院
        function updateCollege() {
            const form = document.getElementById('editCollegeForm');
            const formData = new FormData(form);
            const id = document.getElementById('editCollegeId').value;
            
            fetch('/api/colleges/' + id, {
                method: 'PUT',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    closeModal('editCollegeModal');
                    location.reload();
                } else {
                    alert('更新失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('更新失败');
            });
        }

        // 删除学院
        function deleteCollege(id) {
            if (confirm('确定要删除这个学院吗？删除后将无法恢复！')) {
                fetch('/api/colleges/' + id, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('删除失败：' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除失败');
                });
            }
        }

        // 从按钮删除学院
        function deleteCollegeFromButton(button) {
            const id = button.getAttribute('data-id');
            deleteCollege(id);
        }

        // 搜索过滤
        function filterColleges() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const table = document.getElementById('collegeTable');
            const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
            
            for (let i = 0; i < rows.length; i++) {
                const collegeName = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
                if (collegeName.includes(searchTerm)) {
                    rows[i].style.display = '';
                } else {
                    rows[i].style.display = 'none';
                }
            }
        }

        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modals = document.getElementsByClassName('modal');
            for (let i = 0; i < modals.length; i++) {
                if (event.target == modals[i]) {
                    modals[i].style.display = 'none';
                }
            }
        }
    </script>
</body>
</html> 